<link href="/assets/home/css/order.css" rel="stylesheet" />
<!--上拉刷新，下拉加载  -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css">
<!--上拉刷新，下拉加载  -->
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
<!-- 搜索框 -->
<div class="mui-input-row mui-search" style="position: sticky;left: 0; top: 0;z-index: 99;background-color: white;">
    <input type="search" class="mui-input-clear" placeholder="请输入课程名称或者订单号或者订单金额" name="search" id="keywords"
        style="margin-bottom: 0px;" />
</div>
<div class="page__bd" style="height: 94%">
    <div class="weui-tab mescroll" id="mescroll">
        <div class="weui-tab__panel">

        </div>
    </div>

</div>
<script>
  
    var mescroll = new MeScroll("mescroll", {
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            auto: false,
            callback: upCallback, //上拉加载的回调
            page: {
                size: 2 //每页数据条数,默认10
            },
        }
    }
    )
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll()

        $(".weui-tab__panel").html('')

    }
    // 回车搜索
    $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            search = $("#keywords").val()
            downCallback()
        }
    })
    async function upCallback(val) {
        page = val.num; // 页码, 默认从1开始 如何修改从0开始 ?
        size = val.size;
        let search = $('#keywords').val()
        let data = {
            page: page,
            limit: size,
            keywords: search
        }
        $.ajax({
            type: 'post',
            url: `{:url('home/subject/order')}`,
            dataType: 'json',
            data: data,
            success: function (result) {
                if (result.code == 0) {
                    mui.toast(result.msg)
                    mescroll.endBySize(0, 0);
                    return false;
                }
                mescroll.endBySize(result.data.list.length, result.data.count);
                ListEvent(result.data.list)
            }
        })

    }
    function ListEvent(list) {
        list.forEach(item => {
             let comment = ''
            if (item.comment_status) {
                comment= `<div class="weui-form-preview__btn weui-form-preview__btn_default"  >已评价</div>`;
            } else {
                comment= `<a class="weui-form-preview__btn weui-form-preview__btn_default" href="{:url('home/subject/comment')}?subid=${item.subject.id}">评价</a>`;
            }
            var t =
                `
                    <div class="weui-form-preview">
                    <div class="weui-form-preview__hd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">订单金额</label>
                            <em class="weui-form-preview__value">¥${item.total}</em>
                        </div>
                    </div>
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">订单号</label>
                            <span class="weui-form-preview__value">${item.code}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">课程名称</label>
                            <span class="weui-form-preview__value">${item.subject.title}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">购买时间</label>
                            <span class="weui-form-preview__value">${item.createtime}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">课程简介</label>
                            <span class="weui-form-preview__value" style="text-overflow: ellipsis; -webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;">${item.subject.content_text}</span>
                        </div>
                    </div>
                    <div class="weui-form-preview__ft">
                        ${comment}
                        <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="{:url('home/subject/detail')}?subid=${item.subject.id}">立即查看</a>
                    </div>
                </div>
                <br />
                `;
            $('.weui-tab__panel').append(t)
        });
    }
</script>